<template>
	<view class="container">
		<view class="p-40">
			<uv-form :model="form" :rules="rules" ref="form">
				<view class="course">
					<uv-form-item
						label="课程名称"
						prop="userInfo.name"
						labelWidth="200rpx"
						:customStyle="{ backgroundColor: '#F5F3F3', padding: '20rpx' }"
					>
						<uv-input v-model="form.course_name" border="none" readonly> </uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-down"></uv-icon>
						</template>
					</uv-form-item>
				</view>
				<view class="section mt-30">
					<view class="mb-40">
						<view class="section__title">个人信息</view>
						<view class="section__entitle mt-20">Personal Information </view>
					</view>
					<uv-form-item
						label="姓名"
						prop="username"
						labelWidth="200rpx"
						:customStyle="{ backgroundColor: '#F5F3F3', padding: '20rpx' }"
					>
						<uv-input v-model="form.username" border="none"> </uv-input>
					</uv-form-item>
					<view style="height: 30rpx"></view>
					<uv-form-item
						label="性别"
						prop="gender"
						labelWidth="200rpx"
						:customStyle="{ backgroundColor: '#F5F3F3', padding: '20rpx' }"
						@click="showSexSelect"
					>
						<uv-input v-model="form.gender" border="none"> </uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-down"></uv-icon>
						</template>
					</uv-form-item>
					<uv-action-sheet
						ref="genderSelect"
						:actions="genderList"
						title="请选择性别"
						@select="sexSelect"
					>
					</uv-action-sheet>
					<view style="height: 30rpx"></view>
					<uv-form-item
						label="年龄"
						prop="age"
						labelWidth="200rpx"
						:customStyle="{ backgroundColor: '#F5F3F3', padding: '20rpx' }"
					>
						<uv-input v-model="form.age" border="none" type="number"> </uv-input>
					</uv-form-item>
					<view style="height: 30rpx"></view>
					<uv-form-item
						label="证件照"
						prop="photo"
						labelWidth="200rpx"
						:customStyle="{ backgroundColor: '#F5F3F3', padding: '20rpx' }"
					>
						<uv-input v-model="form.photo" border="none" readonly> </uv-input>
						<template v-slot:right>
							<view style="color: #8f7a4a" @click="chooseImage">点击上传</view>
						</template>
					</uv-form-item>
					<view style="height: 30rpx"></view>
					<uv-form-item
						label="电话"
						prop="phone"
						labelWidth="200rpx"
						:customStyle="{ backgroundColor: '#F5F3F3', padding: '20rpx' }"
					>
						<uv-input v-model="form.phone" border="none"> </uv-input>
					</uv-form-item>
					<view style="height: 30rpx"></view>
					<uv-form-item
						label="所在俱乐部"
						prop="club"
						labelWidth="200rpx"
						:customStyle="{ backgroundColor: '#F5F3F3', padding: '20rpx' }"
					>
						<uv-input v-model="form.club" border="none"> </uv-input>
					</uv-form-item>
					<view style="height: 30rpx"></view>
					<uv-form-item
						label="目前教练等级"
						prop="level"
						labelWidth="200rpx"
						:customStyle="{ backgroundColor: '#F5F3F3', padding: '20rpx' }"
						@click="levelActionSheetShow"
					>
						<uv-input v-model="form.level" border="none" readonly> </uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-down"></uv-icon>
						</template>
					</uv-form-item>

					<uv-action-sheet
						ref="levelActionSheet"
						:actions="levelList"
						title="教练等级"
						@select="levelActionSheetSelect"
						@close="levelActionSheetClose"
					>
					</uv-action-sheet>
				</view>
			</uv-form>
			<view style="width: 188rpx; margin: 0 auto; margin-top: 80rpx">
				<uv-button color="#292A43" text="报名" shape="circle" @click="submit"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
import { getLevelList, courseApply, orderPay } from '@/api/index';
import $tools from '@/utils/common';
export default {
	data() {
		return {
			form: {
				course_id: '',
				course_name: '',
				username: '',
				gender: '',
				age: '',
				photo: '',
				phone: '',
				club: '',
				level: '',
			},
			levelList: [],
			genderList: [
				{
					name: '男',
				},
				{
					name: '女',
				},
			],
			rules: {
				username: {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change'],
				},
				gender: {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change'],
				},
				age: {
					type: 'number',
					required: true,
					message: '请输入年龄',
					max: 60,
					trigger: ['blur', 'change'],
				},
				photo: {
					type: 'string',
					required: true,
					message: '请上传证件照',
					trigger: ['blur', 'change'],
				},
				phone: [
					{
						required: true,
						message: '请输入手机号',
						pattern: '',
						trigger: ['blur', 'change'],
					},
					{
						pattern: /^1\d{10}$/,
						message: '手机号格式错误',
						trigger: ['blur'],
					},
				],
				club: {
					type: 'string',
					required: true,
					message: '请输入所在俱乐部',
					trigger: ['blur', 'change'],
				},
				level: {
					type: 'string',
					required: true,
					message: '请选择教练等级',
					trigger: ['blur', 'change'],
				},
			},
		};
	},
	onShareAppMessage() {},
	onShareTimeline() {},
	onLoad(options) {
		this.form.course_id = options.course_id;
		this.form.course_name = options.course_name;
		this.getInit();
		console.log(this.form);
	},
	onShow() {},
	onReachBottom() {},

	onPullDownRefresh() {},
	methods: {
		getInit() {
			//教练等级
			getLevelList().then((res) => {
				console.log(res);
				this.levelList = res.data;
			});
		},
		levelActionSheetShow() {
			this.$refs.levelActionSheet.open();
		},
		levelActionSheetSelect(e) {
			console.log('选中该项：', e);
			this.form.level = e.name;
			// 对部分表单字段进行校验
			this.$refs.form.validateField('level', (err) => {
				// 处理错误后的逻辑
			});
		},
		levelActionSheetClose() {
			console.log('关闭');
		},
		// 性别选择
		showSexSelect() {
			this.$refs.genderSelect.open();
			this.hideKeyboard();
		},
		// 性别选择返回结果
		sexSelect(e) {
			this.form.gender = e.name;
			console.log(this.form);
			// 对部分表单字段进行校验
			this.$refs.form.validateField('gender', (err) => {
				// 处理错误后的逻辑
			});
		},
		//上传证件照
		chooseImage() {
			$tools.chooseMedia().then((res) => {
				console.log(res);
				const url = res[0].tempFilePath;
				$tools.uploadFile(url).then((uRes) => {
					console.log(uRes);
					this.form.photo = uRes.url;
				});
			});
		},
		submit() {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.form
				.validate()
				.then((res) => {
					this.apply();
				})
				.catch((err) => {
					uni.showToast({
						icon: 'error',
						title: '校验失败',
					});
				});
		},
		apply() {
			const param = this.form;
			courseApply(param).then((res) => {
				console.log(res);
				this.onPay(res.data);
			});
		},
		onPay(code) {
			const param = {
				code: code,
			};
			orderPay(param).then((res) => {
				const payInfo = res.data;
				console.log(payInfo);
				wx.requestPayment({
					timeStamp: payInfo.timeStamp,
					nonceStr: payInfo.nonceStr,
					package: payInfo.package,
					signType: payInfo.signType,
					paySign: payInfo.paySign,
					success(res) {
						console.log(res);
						uni.showModal({
							title: '提示',
							content: '支付成功',
							success: function (ret) {},
						});
					},
					fail(err) {
						console.log('支付失败');
						console.log(err);
					},
				});
			});
		},
		hideKeyboard() {
			uni.hideKeyboard();
		},
	},
};
</script>

<style lang="scss">
@import 'index.scss';
</style>
